<template>
    <div class="nav-menu-list">
        <el-menu
        style="height:100%"
        :uniqueOpened="true"
        :default-active="path"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
            <el-menu-item v-for="item in navMenuList" :key="item.index" :index="item.index">
                <i :class="item.icon"></i>
                <template #title>{{ item.text }}</template>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import { computed, reactive } from 'vue'
import { useRoute } from 'vue-router'
export default {
    setup(){
        const navMenuList = reactive([
            {text:'admin',icon:'el-icon-document',index:'/home/index'},
            {text:'edit',icon:'el-icon-edit',index:'/home/edit'},
            {text:'tags',icon:'el-icon-discount',index:'/home/tags'},
            {text:'msg',icon:'el-icon-chat-dot-square',index:'/home/msg'},
            {text:'friend',icon:'el-icon-link',index:'/home/friend'}
        ])

        const route = useRoute()
        const path = computed(() => route.path)

        return {
            navMenuList,
            path
        }
    }
}
</script>

<style scoped>
.nav-menu-list{
    min-height: 100vh;
    width:15rem;

}
</style>